<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生选课系统 - 课表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<!--    <script src="script.js"></script>-->
<!--    <link href="style.css" rel="stylesheet">-->
    <script src="../js/coursetable.js"></script>
    <link rel="stylesheet" href="../css/coursetable.css">
</head>
<body class="bg-gray-50 font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-blue-600 text-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-2xl"></i>
                <h1 class="text-xl font-bold">学生选课系统</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="../html/home.html" class="hover:text-blue-200 transition-colors duration-200">首页</a></li>
                    <li><a href="../html/coursetable.html" class="font-bold border-b-2 border-white pb-1">课表</a></li>
    
                    <li><a href="../html/personalcenter.html" class="hover:text-blue-200 transition-colors duration-200">个人中心</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <div class="relative">
                    <input type="text" placeholder="搜索课程..." class="py-1 px-3 rounded-full text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <i class="fa fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex items-center space-x-1">
                    <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                    <span class="hidden md:inline">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 课表控制栏 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4 mb-4 md:mb-0">
                <div class="relative">
                    <select id="semesterSelect" class="appearance-none bg-gray-100 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
                        <option value="2025-1">2025年春季学期</option>
                        <option value="2024-2">2024年秋季学期</option>
                        <option value="2024-1">2024年春季学期</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                </div>
                <div class="relative">
                    <select id="courseTypeSelect" class="appearance-none bg-gray-100 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
                        <option value="all">全部课程</option>
                        <option value="required">必修课</option>
                        <option value="elective">选修课</option>
                        <option value="practical">实践课</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <button id="prevWeekBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg transition-colors duration-200 flex items-center">
                    <i class="fa fa-chevron-left mr-1"></i> 上一周
                </button>
                <div id="currentWeek" class="text-lg font-medium">第12周 (2025-05-11至2025-05-17)</div>
                <button id="nextWeekBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg transition-colors duration-200 flex items-center">
                    下一周 <i class="fa fa-chevron-right ml-1"></i>
                </button>
            </div>
        </div>

        <!-- 课表视图切换 -->
        <div class="mb-4 flex justify-end">
            <div class="bg-white rounded-lg shadow-sm p-2 inline-flex">
                <button id="gridViewBtn" class="py-1 px-3 rounded-md bg-blue-600 text-white">
                    <i class="fa fa-th-large mr-1"></i> 网格视图
                </button>
                <button id="listViewBtn" class="py-1 px-3 rounded-md text-gray-700 hover:bg-gray-100 transition-colors duration-200">
                    <i class="fa fa-list mr-1"></i> 列表视图
                </button>
            </div>
        </div>

        <!-- 课表网格视图 -->
        <div id="gridView" class="bg-white rounded-lg shadow-md p-4 overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2 w-[80px]">节次</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期一</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期二</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期三</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期四</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期五</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期六</th>
                        <th class="border border-gray-200 bg-gray-100 text-gray-600 py-3 px-2">星期日</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 第1-2节 -->
                    <tr>
                        <td class="border border-gray-200 bg-gray-50 text-gray-600 py-3 px-2 text-center">1-2</td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-blue-100 border-l-4 border-blue-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="1">
                                <div class="font-medium text-blue-800">高等数学</div>
                                <div class="text-sm text-gray-600">李教授</div>
                                <div class="text-xs text-gray-500">理教201</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-green-100 border-l-4 border-green-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="2">
                                <div class="font-medium text-green-800">大学物理</div>
                                <div class="text-sm text-gray-600">王教授</div>
                                <div class="text-xs text-gray-500">理教302</div>
                                <div class="text-xs text-gray-500">必修 | 第3-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-purple-100 border-l-4 border-purple-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="3">
                                <div class="font-medium text-purple-800">数据结构</div>
                                <div class="text-sm text-gray-600">张教授</div>
                                <div class="text-xs text-gray-500">计教403</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                    </tr>
                    <!-- 第3-4节 -->
                    <tr>
                        <td class="border border-gray-200 bg-gray-50 text-gray-600 py-3 px-2 text-center">3-4</td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-blue-100 border-l-4 border-blue-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="1">
                                <div class="font-medium text-blue-800">高等数学</div>
                                <div class="text-sm text-gray-600">李教授</div>
                                <div class="text-xs text-gray-500">理教201</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-green-100 border-l-4 border-green-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="2">
                                <div class="font-medium text-green-800">大学物理</div>
                                <div class="text-sm text-gray-600">王教授</div>
                                <div class="text-xs text-gray-500">理教302</div>
                                <div class="text-xs text-gray-500">必修 | 第3-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-yellow-100 border-l-4 border-yellow-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="4">
                                <div class="font-medium text-yellow-800">英语</div>
                                <div class="text-sm text-gray-600">刘老师</div>
                                <div class="text-xs text-gray-500">文教101</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-purple-100 border-l-4 border-purple-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="3">
                                <div class="font-medium text-purple-800">数据结构</div>
                                <div class="text-sm text-gray-600">张教授</div>
                                <div class="text-xs text-gray-500">计教403</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                    </tr>
                    <!-- 午休 -->
                    <tr class="bg-gray-50">
                        <td class="border border-gray-200 py-2 px-2 text-center text-gray-500">午休</td>
                        <td class="border border-gray-200 py-2 px-2 text-center text-gray-500" colspan="7">12:00 - 13:50</td>
                    </tr>
                    <!-- 第5-6节 -->
                    <tr>
                        <td class="border border-gray-200 bg-gray-50 text-gray-600 py-3 px-2 text-center">5-6</td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-indigo-100 border-l-4 border-indigo-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="5">
                                <div class="font-medium text-indigo-800">计算机网络</div>
                                <div class="text-sm text-gray-600">陈教授</div>
                                <div class="text-xs text-gray-500">计教301</div>
                                <div class="text-xs text-gray-500">必修 | 第5-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-yellow-100 border-l-4 border-yellow-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="4">
                                <div class="font-medium text-yellow-800">英语</div>
                                <div class="text-sm text-gray-600">刘老师</div>
                                <div class="text-xs text-gray-500">文教101</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-red-100 border-l-4 border-red-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="6">
                                <div class="font-medium text-red-800">人工智能</div>
                                <div class="text-sm text-gray-600">赵教授</div>
                                <div class="text-xs text-gray-500">计教501</div>
                                <div class="text-xs text-gray-500">选修 | 第7-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                    </tr>
                    <!-- 第7-8节 -->
                    <tr>
                        <td class="border border-gray-200 bg-gray-50 text-gray-600 py-3 px-2 text-center">7-8</td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-teal-100 border-l-4 border-teal-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="7">
                                <div class="font-medium text-teal-800">程序设计</div>
                                <div class="text-sm text-gray-600">孙老师</div>
                                <div class="text-xs text-gray-500">计教202</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-indigo-100 border-l-4 border-indigo-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="5">
                                <div class="font-medium text-indigo-800">计算机网络</div>
                                <div class="text-sm text-gray-600">陈教授</div>
                                <div class="text-xs text-gray-500">计教301</div>
                                <div class="text-xs text-gray-500">必修 | 第5-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-pink-100 border-l-4 border-pink-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="8">
                                <div class="font-medium text-pink-800">离散数学</div>
                                <div class="text-sm text-gray-600">周教授</div>
                                <div class="text-xs text-gray-500">理教102</div>
                                <div class="text-xs text-gray-500">必修 | 第3-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-red-100 border-l-4 border-red-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="6">
                                <div class="font-medium text-red-800">人工智能</div>
                                <div class="text-sm text-gray-600">赵教授</div>
                                <div class="text-xs text-gray-500">计教501</div>
                                <div class="text-xs text-gray-500">选修 | 第7-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                    </tr>
                    <!-- 第9-10节 -->
                    <tr>
                        <td class="border border-gray-200 bg-gray-50 text-gray-600 py-3 px-2 text-center">9-10</td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-orange-100 border-l-4 border-orange-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="9">
                                <div class="font-medium text-orange-800">体育</div>
                                <div class="text-sm text-gray-600">吴老师</div>
                                <div class="text-xs text-gray-500">体育馆</div>
                                <div class="text-xs text-gray-500">必修 | 第1-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-pink-100 border-l-4 border-pink-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="8">
                                <div class="font-medium text-pink-800">离散数学</div>
                                <div class="text-sm text-gray-600">周教授</div>
                                <div class="text-xs text-gray-500">理教102</div>
                                <div class="text-xs text-gray-500">必修 | 第3-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                        <td class="border border-gray-200 p-1">
                            <div class="bg-emerald-100 border-l-4 border-emerald-500 rounded p-2 mb-1 h-24 cursor-pointer hover:shadow-md transition-shadow duration-200" data-course-id="10">
                                <div class="font-medium text-emerald-800">创新创业</div>
                                <div class="text-sm text-gray-600">郑老师</div>
                                <div class="text-xs text-gray-500">文教302</div>
                                <div class="text-xs text-gray-500">选修 | 第9-16周</div>
                            </div>
                        </td>
                        <td class="border border-gray-200 p-1"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 课表列表视图 (默认隐藏) -->
        <div id="listView" class="bg-white rounded-lg shadow-md p-4 hidden">
            <div class="mb-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-gray-800">本周课程列表</h2>
                <div class="flex space-x-2">
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-1 px-3 rounded transition-colors duration-200">
                        <i class="fa fa-calendar mr-1"></i> 按日期排序
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-1 px-3 rounded transition-colors duration-200">
                        <i class="fa fa-sort-alpha-down mr-1"></i> 按课程排序
                    </button>
                </div>
            </div>
            <div class="space-y-3">
                <!-- 星期一课程 -->
                <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-bold text-lg text-blue-800">星期一 (2025-05-11)</h3>
                        <span class="text-sm text-blue-600">4门课程</span>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">高等数学</h4>
                                    <p class="text-sm text-gray-600">李教授 | 理教201</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">08:00-09:40</p>
                                    <p class="text-xs text-gray-500">第1-2节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第1-16周</span>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">高等数学</h4>
                                    <p class="text-sm text-gray-600">李教授 | 理教201</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">10:00-11:40</p>
                                    <p class="text-xs text-gray-500">第3-4节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第1-16周</span>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">程序设计</h4>
                                    <p class="text-sm text-gray-600">孙老师 | 计教202</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">14:00-15:40</p>
                                    <p class="text-xs text-gray-500">第5-6节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-teal-100 text-teal-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第1-16周</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 星期二课程 -->
                <div class="border-l-4 border-green-500 bg-green-50 p-4 rounded">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-bold text-lg text-green-800">星期二 (2025-05-12)</h3>
                        <span class="text-sm text-green-600">4门课程</span>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">大学物理</h4>
                                    <p class="text-sm text-gray-600">王教授 | 理教302</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">08:00-09:40</p>
                                    <p class="text-xs text-gray-500">第1-2节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第3-16周</span>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">大学物理</h4>
                                    <p class="text-sm text-gray-600">王教授 | 理教302</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">10:00-11:40</p>
                                    <p class="text-xs text-gray-500">第3-4节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第3-16周</span>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">计算机网络</h4>
                                    <p class="text-sm text-gray-600">陈教授 | 计教301</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">14:00-15:40</p>
                                    <p class="text-xs text-gray-500">第5-6节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第5-16周</span>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow duration-200">
                            <div class="flex justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-800">计算机网络</h4>
                                    <p class="text-sm text-gray-600">陈教授 | 计教301</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium text-gray-800">16:00-17:40</p>
                                    <p class="text-xs text-gray-500">第7-8节</p>
                                </div>
                            </div>
                            <div class="mt-2 flex justify-between items-center">
                                <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">必修</span>
                                <span class="text-xs text-gray-500">第5-16周</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 其他日期课程省略 -->
                <!-- 此处应有星期三至星期日的课程列表 -->
            </div>
        </div>

        <!-- 课程详情模态框 (默认隐藏) -->
        <div id="courseModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <h2 id="modalCourseTitle" class="text-2xl font-bold text-gray-800">课程详情</h2>
                        <button id="closeModalBtn" class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">课程代码</h3>
                                <p id="modalCourseCode" class="text-gray-800">COMP101</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">课程名称</h3>
                                <p id="modalCourseName" class="text-gray-800">高等数学</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">授课教师</h3>
                                <p id="modalCourseTeacher" class="text-gray-800">李教授</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">课程类型</h3>
                                <p id="modalCourseType" class="text-gray-800">必修课</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">学分</h3>
                                <p id="modalCourseCredits" class="text-gray-800">4</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">上课时间</h3>
                                <p id="modalCourseTime" class="text-gray-800">星期一 08:00-09:40 (第1-2节)</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">上课地点</h3>
                                <p id="modalCourseLocation" class="text-gray-800">理教201</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 mb-1">上课周次</h3>
                                <p id="modalCourseWeeks" class="text-gray-800">第1-16周</p>
                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-sm font-medium text-gray-500 mb-2">课程简介</h3>
                            <p id="modalCourseDescription" class="text-gray-700 leading-relaxed">
                                本课程是高等数学的基础课程，主要内容包括函数、极限、导数、积分等基本概念和方法。通过本课程的学习，学生将掌握高等数学的基本理论和方法，为后续专业课程的学习打下坚实的数学基础。
                            </p>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-sm font-medium text-gray-500 mb-2">教学大纲</h3>
                            <ul id="modalCourseSyllabus" class="list-disc list-inside text-gray-700 space-y-1">
                                <li>第1章：函数与极限</li>
                                <li>第2章：导数与微分</li>
                                <li>第3章：微分中值定理与导数的应用</li>
                                <li>第4章：不定积分</li>
                                <li>第5章：定积分</li>
                                <li>第6章：定积分的应用</li>
                            </ul>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button id="cancelModalBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
                                关闭
                            </button>
                            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                <i class="fa fa-calendar-plus-o mr-1"></i> 添加到日历
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">学生选课系统</h3>
                    <p class="text-gray-400 text-sm">
                        提供便捷的课程查询、选课和课表管理服务，帮助学生高效完成学业。
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors duration-200">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">课表</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">选课</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">成绩查询</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">帮助中心</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors duration-200">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">使用指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">联系方式</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-2"></i> 010-12345678
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-2"></i> support@example.com
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-map-marker mr-2"></i>博雅甲512
                        </li>
                    </ul>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-qq text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
                <p>© 2025 学生选课系统 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html>
    